<template>
	<view class="content">
		<view class="header">
			<view class="title" src="">
				<image class="title_img"
					src="https://goods.ruanmengkeji.cn/api/fileUp/4ce88c2c-7ec7-4c9f-aae5-cd2f97056bde.png" mode="">
				</image>
			</view>
		</view>
		<view class="content_box">
			<view class="mon_box">
				<view class="user_name" @click="goSetUp">
					<text>{{userInfo ? userInfo.name : "普通用户"}}</text>
					<image class="user_img" :src="userInfo ? userInfo.avatar: '../../static/img/loginimg.png'"  mode=""></image>
				</view>
				<view class="user_monye" v-if="identityState == 1">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(item,index) in listTwo" :key="index">
							<image style="width: 68rpx;height: 68rpx;" :src="item.name" mode=""></image>
							<text class="grid-text">{{item.title}}</text>
							<text class="money">{{item.money}}</text>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="user_monye" v-if="identityState == 2">
					<u-grid :border="false" col="3">
						<u-grid-item v-for="(item,index) in listThree" :key="index">
							<image style="width: 68rpx;height: 68rpx;" :src="item.name" mode=""></image>
							<text class="grid-text">{{item.title}}</text>
							<text class="money">{{item.money}}</text>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="role_" v-if="loginState == 0" @click="goRealName">
					去实名认证
				</view>
			</view>
			<view class="userid">
				<view class="left">
					<view class="left1">
						身份服务码
					</view>
					<view class="left2">
						快速支付
					</view>
					<view class="left3">
						Faster Payments
					</view>
				</view>
				<view class="right">
					<image style="width: 198rpx;height: 136rpx;" src="../../static/img/idqrcode.png" mode=""></image>
				</view>
			</view>
			<view class="domain">
				<text style="">我的功能</text>
				<view class="user_domain">
					<u-grid :border="false" col="4">
						<u-grid-item v-for="(listItem,listIndex) in list1" :key="listIndex"
							@click="handelClick(listItem)" style="margin-top: 20rpx;">
							<image style="width: 48rpx;height: 48rpx;margin-top: 30rpx;" :src="listItem.name" mode="">
							</image>
							<text class="grid-text">{{listItem.title}}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				loginState: 0, //登录状态
				identityState: 0, //余额展示
				listThree: [{
						name: '../../static/img/moneybag.png',
						title: '员工卡余额',
						money: "--",
					},
					{
						name: '../../static/img/cardbag.png',
						title: '职工卡待付余额',
						money: "--",
					},
					{
						name: '../../static/img/integral.png',
						title: '积分',
						money: "--",
					}
				],
				listTwo: [{
						name: '../../static/img/moneybag.png',
						title: '会员卡余额',
						money: "--",
					},
					{
						name: '../../static/img/integral.png',
						title: '积分',
						money: "--",
					}
				],
				list1: [{
						name: '../../static/img/shopcar.png',
						title: '我的订单'
					},
					{
						name: '../../static/img/identity.png',
						title: '身份认证'
					},
					{
						name: '../../static/img/qrcode.png',
						title: '身份码'
					},
					{
						name: '../../static/img/setup.png',
						title: '设置'
					},
					{
						name: '../../static/img/business.png',
						title: '商家端'
					},
					{
						name: '../../static/img/rider.png',
						title: '骑手端'
					}
				],
			}
		},
		onLoad() {

		},
		onShow() {
			const data = uni.getStorageSync("data");
			if (data) {
				this.userInfo = data.data.userInfo;
				this.loginState = this.userInfo.isAuth === 1 ? 1 : 0;
				this.identityState = this.userInfo.jobNumber ? (this.userInfo.isAuth === 1 ? 2 : 1) : 0;
			}
		},
		methods: {
			handelClick(name) {
				if (name.title == '设置') {
					uni.navigateTo({
						url: '/homepage/setup/setup'
					})
				} else if (name.title == '身份认证') {
					uni.navigateTo({
						url: '/homepage/nameauthentication/nameauthentication'
					})
				} else if (name.title == '商家端') {
					uni.showToast({
						title: '您还没有权限~',
						icon: 'none'
					})
				} else if (name.title == '骑手端') {
					uni.navigateTo({
						url: '/homepage/rider/rider-client'
					})
				} else if (name.title == '我的订单') {
					uni.switchTab({
						url: '/pages/order/order'
					})
				}else if(name.title == '身份码'){
					uni.navigateTo({
						url:'/homepage/mineIdentificationCode/mineIdentificationCode'
					})
				}
			},
			//去设置
			goSetUp() {
				uni.navigateTo({
					url: '/homepage/setup/setup'
				})
			},
			//实名认证
			goRealName() {
				uni.navigateTo({
					url: '/homepage/nameauthentication/nameauthentication'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		position: fixed;
		width: 750rpx;
		height: 676rpx;
		top: 0;
		left: 0;
		right: 0;
		height: calc(var(--status-bar-height) + 624rpx);
		/* 状态栏+导航栏高度 */
		// background-image: url('');
		/* 替换为你的图片路径 */
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: -1;
		/* 确保头部在其他元素之上 */
	}

	.title {
		color: white;
		font-size: 16px;
	}

	.title_img {
		width: 750rpx;
		height: 676rpx;
	}

	.content_box {
		width: 710rpx;
		margin: auto;
		margin-top: 384rpx;

		.mon_box {
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 20rpx;

			.user_name {

				.user_img {
					width: 108rpx;
					height: 108rpx;
					position: absolute;
					top: 338rpx;
					right: 50rpx;
					border-radius: 50%;
				}

				text {
					width: 128rpx;
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}

			.role_ {
				width: 348rpx;
				height: 64rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				text-align: center;
				line-height: 64rpx;
				color: white;
				font-size: 28rpx;
				margin: 20rpx auto;
				background: #5caf5d;
			}

			.user_monye {
				margin-top: 30rpx;
				text-align: center;
			}

			.grid-text {
				// width: 160rpx;
				height: 34rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #7F7F7F;
				line-height: 34rpx;
				text-align: center;
				margin-top: 30rpx;
				font-style: normal;
				text-transform: none;
			}

			.money {
				width: 86rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #333333;
				line-height: 40rpx;
				margin-top: 20rpx;
				font-style: normal;
				text-transform: none;
			}
		}

		.userid {
			height: 172rpx;
			margin-top: 20rpx;
			display: flex;
			background: #FFFFFF;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			padding: 20rpx;

			.left {
				width: 486rpx;
				font-family: PingFang SC, PingFang SC;

				.left1 {
					height: 40rpx;
					font-weight: bold;
					font-size: 28rpx;
					margin-top: 10rpx;
					color: #333333;
					line-height: 40rpx;
					font-style: normal;
					text-transform: none;
				}

				.left2 {
					height: 34rpx;
					margin-top: 20rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #7F7F7F;
					line-height: 34rpx;
					font-style: normal;
					text-transform: none;
				}

				.left3 {
					height: 34rpx;
					font-weight: 400;
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #7F7F7F;
					line-height: 34rpx;
					font-style: normal;
					text-transform: none;
				}
			}
		}

		.domain {
			padding: 20rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			.grid-text {
				width: 112rpx;
				height: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				margin-top: 10rpx;
				font-style: normal;
				text-transform: none;
			}

			.user_domain {
				text-align: center;
			}
		}
	}
</style>